<template>
<div>

<el-row class="mt10">

	<el-form :inline="true" :model="form" >
		

		<el-form-item >
		    <el-input v-model="form.name" placeholder="网格名称"
		    style="width:292px;height:40px;"
		    ></el-input>
		</el-form-item>

		<el-form-item>
		    <el-button type="primary" @click="search"
		    style="width:144px;height:40px;background:#0A85CB;border:1px solid rgba(11, 178, 248, 1);"
		    >查询</el-button>
		</el-form-item>

		<el-form-item>
		    <el-button type="success" @click="add"
		    style="width:144px;height:40px;background:#19A65B;border:1px solid rgba(31, 231, 124, 1);"
		    >添加</el-button>
		</el-form-item>

	</el-form>
	</el-row>

	<el-row class="bbg3">

	<el-table
	    :data="subMemberList.results"
	    :header-cell-style="{
			'background-color': '#169098',
		    'color': '#fff',    
		}"
	    border
	    height="620"
	    :row-style="{
	    	height : '57px'
	    }"
	    style="width:100%;">
	    <el-table-column
	      prop="company_name"
	      align="center"
	      label="网格名称">
	    </el-table-column>
	   <!--  <el-table-column
	      prop="company_name"
	      label="所属网格"
	      width="150">
	    </el-table-column> -->
	    <el-table-column
	      prop="duty"
	      align="center"
	      label="职责">
	    </el-table-column>
	    <el-table-column
	      prop="sort"
	      align="center"
	      label="排序">
	    </el-table-column>
	    <el-table-column
	      align="center"
	      label="操作">
	      	<template v-if="scope.row.id" slot-scope="scope">
	      		<el-button type="success" size="mini" 
	      		icon="el-icon-edit" circle
	      		@click="edit(scope.row)">
	      		</el-button>
	      		<el-button type="danger" size="mini" 
	      		icon="el-icon-delete" circle
	      		@click="del(scope.row)">
	      		</el-button>
	      	</template>
	    </el-table-column>
	  </el-table>

	</el-row>


	<el-row class="text-center mt20">
	<el-pagination
	  @size-change="handleSizeChange"
	  @current-change="handleCurrentChange"
	  :current-page="pageNo"
	  :page-size="pageSize"
	  layout="total, sizes, prev, pager, next"
	  :total="subMemberList.totalRecord">
	</el-pagination>
</el-row>


<el-dialog title="执行部门" width="530px" :visible.sync="dialogFormVisible">
  	<el-form ref="form"
		label-width="100px"	
		:rules="rule"
		:model="current"
		>
		
		<el-form-item label="网格名称:" prop="name" >
			<el-input v-model="current.name" style="width:380px;"></el-input>
		</el-form-item>

		<el-form-item label="排序："  >
		    <el-input v-model="current.sort" style="width:380px;"></el-input>
		</el-form-item>

		<!-- <el-form-item label="地区：" > -->

		  	<!-- <el-tag
			  v-for="item, index in current.citys"
			  :key="item.id"
			  type="danger"
			  class="mr10"
			  @close="handleClose(index)"
			  closable>
			  {{item}}
			</el-tag>

			<br> -->
			<!-- <el-cascader 
			style="width:400px; margin-top:10px; margin-right:10px;"
			:options="districtData"
			:props="props"
			filterable
			change-on-select
			v-model="selectedOptions">
			</el-cascader> -->

			

			<!-- <el-button type="primary" @click="addCity">添加</el-button> -->
		<!-- </el-form-item> -->


		<el-form-item label="职责:" >
			<el-input type="textarea" v-model="current.duty" style="width:380px;"
			maxlength="20"
  			show-word-limit
			></el-input>
		</el-form-item>


		<el-form-item >
			<el-row style="width:380px;">
			  <el-col :span="12">
			  	<el-button type="primary" @click="create"
			  	style="width:100px;background:#19A65B;border:1px solid rgba(31, 231, 124, 1);"
			  	>
					保 存
				</el-button>
			  	
			  </el-col>
			  <el-col :span="12" class="text-right">
			  	<el-button @click="dialogFormVisible = false"
			  	style="width:100px;background:#0A85CB;border:1px solid rgba(11, 178, 248, 1); color:#fff;"
			  	>取 消</el-button>
			  </el-col>
			</el-row>
		</el-form-item>
		
	</el-form>
  <!-- <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="create">确 定</el-button>
  </div> -->
</el-dialog>

</div>
</template>

<script>

import { mapGetters } from 'vuex'
import District from 'ydui-district/dist/gov_province_city_area';

export default {
	
	name : 'member',
	
	data () {
		return {
		  	pageNo : 1,
			pageSize : 10,

			gridid : this.obj.id,
			parentGrid : this.obj,

			form : {},
			subMemberList : {},

			dialogFormVisible : false,

			what : '',

			current : {},

			districtData : District,

			props : {
				value : 'n',
				label : 'n',
				children : 'c',
			},

			selectedOptions : [],

			rule: {
	          name: [
	            { required: true, message: '请输入网格名称', trigger: 'blur' },
	            { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
	          ],
	        }
		}
	},

	props : {
		obj: {
			type: Object,
			default () {
				return {}
			},
		}
	},

	components : {
		
	},

	computed : {
		...mapGetters([
			
		]),
	},

	methods : {
		handleSizeChange (val) {
			console.log('laksjdlajsldjlksajdsa');
			this.pageSize = val;
			this.init();
		},

		handleCurrentChange (val) {
			this.pageNo = val;
			this.init();
		},

		search () {
			this.pageNo = 1;
			this.init();
		},

		init () {
			this.$http({
				fun : 'subMemberList',
				grid_id : this.gridid,
				name : this.form.name,
				pageNo : this.pageNo,
				pageSize : this.pageSize,
				cb : res => {
					console.log('subMemberList');
					console.log(res);
					//this.subMemberList = res;
					this.subMemberList = this.$util.tableAdd(res);
				}
			});
		},

		add () {
			
			this.what = 'add';
			this.selectedOptions = [];
			this.current = {
				parent_id : this.gridid,
				parent_ids : this.parentGrid.parent_ids + this.gridid + ',',
				citys : [],
				type : parseInt(this.parentGrid.type) + 1,
				sort : 0,
				duty : '',
				name : '',
			};
			this.dialogFormVisible = true;
		},

		create () {

			this.$refs['form'].validate((valid) => {
	          if (valid) {
	            let para = {
					fun : 'createMember',
					...this.current,
					city_name : this.current.citys.join(','),
					cb : res => {
						console.log(res);
						this.$message.success('操作成功');
						this.dialogFormVisible = false;
						this.init();
					}
				};

				this.$http(para);
	          } else {
	            console.log('error submit!!');
	            return false;
	          }
	        });

			
		},

		edit (item) {
			this.current = {
				...item,
				citys : item.city_name ? item.city_name.split(',') : [],
				name : item.company_name,
			};
			this.what = 'edit';
			this.dialogFormVisible = true;
		},

		handleClose (index) {
	    	this.current.citys.splice(index, 1);
	    },

	    addCity () {
			this.current.citys.push(this.selectedOptions.join(''));
		},

		del (item) {

			this.$confirm('此操作将永久删除该执行单位, 是否继续?', '提示', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'warning'
	        }).then(() => {

	        	this.$http({
	        		fun : 'createMember',
	        		id : item.id,
	        		del_flag : 1,
	        		cb : res => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.init();
	        		},
	        		err : res => {
	        			this.$message({
							type: 'error',
							message: '删除失败!'
						});
	        		}
	        	});
	          
	        }).catch(() => {
	                   
	        });
		},
	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>
.w400 {
	width: 400px;
}
</style>
